<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { line1 } from "./lineData.js";
import moment from "moment";
import * as turf from "@turf/turf";
let index = 0;
let map = null;
let customLayer = null;
let canvas = null;
let route = null;
let marker = null;
let timer = null;
const clickEvent = (e) => {
    console.log(e);
    addLine();
};
const addLine = () => {
    //配置折线路径
    var path = route.map((point) => {
        return new AMap.LngLat(...point);
    });

    //创建 Polyline 实例
    var polyline = new AMap.Polyline({
        path: path,
        lineCap: "round",
        strokeOpacity: 1, //线条透明度
        strokeWeight: 10, //线条宽度
        strokeColor: "#5ccc62", //线条颜色
        lineJoin: "round", //折线拐点连接处样式
    });
    map.add(polyline);

    //创建一个 Marker 实例：
    marker = new AMap.Marker({
        position: path[0], //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "北京",
    });
    //将创建的点标记添加到已有的地图实例：
    map.add(marker);
};
const test = () => {
    const randomCoordinates = line1;
    route = [];
    for (let index = 0; index < randomCoordinates.length - 1; index++) {
        const originPoint = randomCoordinates[index].coordinate;
        const destinationPoint = randomCoordinates[index + 1].coordinate;
        let line = turf.lineString([originPoint, destinationPoint]);
        // 求起止点的长度
        let distance = turf.length(line, { units: "kilometers" });
        let speed = 0.1; // 10m
        if (speed === 0) {
            speed = 0.1;
        }
        let vstep = speed;
        route.push(originPoint);
        while (distance > vstep) {
            // 沿直线指定步长的Point
            let spacerPoint = turf.along(line, vstep, { units: "kilometers" }); // 起点沿线的点
            route.push(spacerPoint.geometry.coordinates);
            vstep = vstep + speed;
        }
        route.push(destinationPoint);
    }
    // 输出增密后的网格点
};
const startAnimation = () => {
    // moveAlong动画，沿着轨迹形式
    /*marker.moveAlong(route, {
        // 每一段的时长
        duration: 0.01, //可根据实际采集时间间隔设置
        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
        autoRotation: false,
    });*/

    let allLength = route.length;
    timer && window.clearInterval(timer);
    timer = setInterval(() => {
        let currentPoint = route[index];
        try {
            // console.log(currentPoint);
            currentPoint &&
                marker.moveTo(currentPoint, {
                    autoRotation: false,
                });
        } catch (e) {
            console.log(e);
            timer && window.clearInterval(timer);
            // debugger;
        }
        index += 2;
        if (index >= allLength) {
            window.clearInterval(timer);
            timer = null;
        }
    }, 10);
};
const pauseAnimation = () => {
    timer && window.clearInterval(timer);
};
const resumeAnimation = () => {
    timer && window.clearInterval(timer);
    startAnimation();
};
const stopAnimation = () => {
    timer && window.clearInterval(timer);
    startAnimation();
};
onMounted(() => {
    window._AMapSecurityConfig = {
        securityJsCode: "b5ab03fd61bab04772724ff47aabfb08",
    };
    AMapLoader.load({
        key: "b5ab03fd61bab04772724ff47aabfb08", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
            "AMap.Autocomplete",
            "AMap.PlaceSearch",
            "AMap.Scale",
            "AMap.OverView",
            "AMap.ToolBar",
            "AMap.MapType",
            "AMap.PolyEditor",
            "AMap.CircleEditor",
            "AMap.MarkerClusterer",
            "AMap.MoveAnimation",
        ], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
        .then((AMap) => {
            map = new AMap.Map("container", {
                // 设置地图容器id
                viewMode: "3D", // 是否为3D地图模式
                zoom: 11, // 初始化地图级别
                center: [119.477184, 30.236299], // 初始化地图中心点位置
            });
            // 给地图实例绑定点击事件 onClick
            map.on("click", clickEvent);
            test();
            addLine();
        })
        .catch((e) => {
            console.log(e);
        });
});

onUnmounted(() => {
    map?.destroy();
});
</script>

<template>
    <div>
        <div id="container"></div>
        <div class="btns">
            <div @click="startAnimation">开始动画</div>
            <div @click="pauseAnimation">暂停动画</div>
            <div @click="resumeAnimation">继续动画</div>
            <div @click="stopAnimation">停止动画</div>
        </div>
    </div>
</template>

<style scoped>
#container {
    width: 100vw;
    height: 100vh;
}
.btns {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 60px;
    height: 32px;
    z-index: 10000;
    div {
        display: block;
        width: 80px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        background: #535bf2;
        color: #fff;
        cursor: pointer;
        border-radius: 4px;
        margin: 0 10px;
        font-size: 14px;
    }
}
</style>
